<template>
  <div class="score_legend">
    <div class="banner_img">
      <img src="../../../assets/img/modules/score/qy_7.png" alt="">
    </div>
    <div  v-if="status === 1" class="status_body">
      <img src="../../../assets/img/modules/score/qy_12.png" alt="">
      <div class="firm_name">{{userData.company_name}}</div>
      <p class="title_text">职工教育网已接收工会会员核验申请，核验结果将会在近期出</p>
    </div>
    <div  v-if="status === 2" class="status_body">
      <img src="../../../assets/img/modules/score/qy_18.png" alt="">
      <div class="firm_name">{{userData.company_name}}</div>
      <p class="title_text">核验成功：审核已通过</p>
      <div class="user_body">
        <div class="item_text">
          <span>姓名</span>
          <span>{{userData.name}}</span>
        </div>
        <div class="item_text">
          <span>身份证</span>
          <span>{{userData.id_card}}</span>
        </div>
        <div class="item_text">
          <span>手机号</span>
          <span>{{userData.phone}}</span>
        </div>
        <div class="item_text">
          <span>工作单位</span>
          <span>{{userData.company_name}}</span>
        </div>
        <div class="item_text">
          <span>单位地址</span>
          <span>{{userData.region_pnames}}</span>
        </div>
        <!--<div class="item_text">
          <span>上级工会</span>
          <span>越秀区总工会</span>
        </div>-->
      </div>
    </div>
    <div  v-if="status === 3" class="status_body">
      <img class="error_img" src="../../../assets/img/modules/score/qy_11.png" alt="">
      <div class="firm_name">广州远程教育中心有限公司</div>
      <p class="title_text error">核验失败原因：请提供工会会员证或会员证明材料</p>
    </div>
    <van-tabs color="#027FFE">
      <van-tab title="会员介绍" name="a">
        <div class="tab_a">
          <div class="verify_text">
            国开工会会员是国开在线联合各级职工教育网，为工会会员打造的专享教育服务，通过提供选学、报读、入学、学习支持、考试、毕业、校友服务、补贴申领等服务，让工会会员的求学变得更便利，更有保障，还能享受工会的补贴服务，全方位提升工会会员的求学体验。
          </div>
          <div class="title_text">
            <span>工会会员权益</span>
          </div>
          <div class="icon_list" data-index="1">
            <div class="icon_item">
              <img src="../../../assets/img/modules/score/icon_v2_7.png" alt="">
              <img class="tag_img" src="../../../assets/img/modules/score/icon_v2_12.png" alt="">
              <p>工会补贴<br>一键申领</p>
            </div>
            <div class="icon_item">
              <img src="../../../assets/img/modules/score/icon_v2_8.png" alt="">
              <img class="tag_img" src="../../../assets/img/modules/score/icon_v2_12.png" alt="">
              <p>工会培训</p>
            </div>
            <div class="icon_item">
              <img src="../../../assets/img/modules/score/icon_v2_11.png" alt="">
              <p>更多权益<br>待开放中</p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="检验流程" name="b">
        <div class="tab_b">
          <img src="../../../assets/img/modules/score/qy_1.png" alt="">
          <img src="../../../assets/img/modules/score/qy_2.png" alt="">
          <img src="../../../assets/img/modules/score/qy_3.png" alt="">
          <img src="../../../assets/img/modules/score/qy_4.png" alt="">
        </div>
      </van-tab>
      <van-tab title="常见问题" name="c">
        <div class="tab_c">
          <div class="item_list">
            <div class="item_text">
              <img class="left_img" src="../../../assets/img/modules/score/qy_6.png" alt="">
              <div class="right_text">
                <p>工会会员证是什么?</p>
              </div>
            </div>
            <div class="item_text">
              <img class="left_img" src="../../../assets/img/modules/score/qy_5.png" alt="">
              <div class="right_text">
                <p>《中华全国总工会会员证》是证明工会会员身份的重要凭证,颁发此证的目的是进一步增强工会组织的吸引力和凝聚力。持有《中华全国总工会会员证》的工会会员,可以享受工会服务,在工会会员大会上有选举权和被选举权，在工会所属的文化宫、俱乐部等文化活动阵地,职业介绍所、消费合作社、法律咨询服务、疗体养院等,享受一定的优待遇。「附图如下」</p>
                <span>*注：工会会员证内必须加盖单位工会公章方可生效</span>
                <img class="zs_img" src="../../../assets/img/modules/score/qy_17.png" alt="">
              </div>
            </div>
          </div>
          <div class="item_list">
            <div class="item_text">
              <img class="left_img" src="../../../assets/img/modules/score/qy_6.png" alt="">
              <div class="right_text">
                <p>如何确认是否是工会会员?</p>
              </div>
            </div>
            <div class="item_text">
              <img class="left_img" src="../../../assets/img/modules/score/qy_5.png" alt="">
              <div class="right_text">
                <p>可咨询单位工会负责人或人事部门。</p>
              </div>
            </div>
          </div>
          <div class="item_list">
            <div class="item_text">
              <img class="left_img" src="../../../assets/img/modules/score/qy_6.png" alt="">
              <div class="right_text">
                <p>如何确认所在单位是否缴纳工会经费?</p>
              </div>
            </div>
            <div class="item_text">
              <img class="left_img" src="../../../assets/img/modules/score/qy_5.png" alt="">
              <div class="right_text">
                <p>可咨询单位工会负责人及上级工会(主要咨询单位向哪一级工会上缴工会经费即可)</p>
              </div>
            </div>
          </div>
          <div class="item_list">
            <div class="item_text">
              <img class="left_img" src="../../../assets/img/modules/score/qy_6.png" alt="">
              <div class="right_text">
                <p>职工如何确定选择上属工会？</p>
              </div>
            </div>
            <div class="item_text">
              <img class="left_img" src="../../../assets/img/modules/score/qy_5.png" alt="">
              <div class="right_text">
                <p>可咨询单位工会负责人及上级工会(主要咨询单位向哪一级工会上缴工会经费即可)</p>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <div v-if="status === 0" class="footer_btn">
      <div class="wk_bg">
        <a href="/score-verify">前往核验</a>
      </div>
    </div>
    <div v-if="status === 3" class="footer_btn">
      <div class="wk_bg">
        <a href="/score-verify">重新申请</a>
      </div>
    </div>
    <div v-if="status === 2" class="footer_btn">
      <div class="wk_bg">
        <a href="/score-verify">修改</a>
      </div>
    </div>
    <div v-if="status === 1" class="footer_btn">
      <div class="wk_bg">
        <a href="javascript:;" @click="modifyMadel">修改</a>
        <a href="javascript:;" @click="urgentMadel">催办</a>
      </div>
    </div>
    <!--打开的状态提示-->
    <div v-if="status === 1 && showModel" class="model_status_1">
      <div class="model_tab_body">
        <h4 class="h4_text">职工身份待核实</h4>
        <p class="p_z">由于您所在的企业工会还未对您身份信息的真实性进行确认，您可以联系您企业工会负责人登录职工教育网平台以便确认您的身份。</p>
        <p class="p_span">如您不清楚工会负责人是谁，可向您企业的人事或行政部门咨询</p>
        <a class="model_btn" href="/score-verify">修改</a>
        <img class="img_btn" src="../../../assets/img/modules/score/qy_10.png" alt="" @click="showModel = false">
      </div>
    </div>
    <div v-if="status === 3 && showModel" class="model_status_3">
      <div class="model_tab_body">
        <h4 class="h4_text">您的工会会员身份未能确认</h4>
        <p class="p_z">请核对您身份信息的填写是否正确</p>
        <p class="p_span">如您对核实结果由疑问，<br>可向您企业的人事或行政部门咨询</p>
        <p class="p_span"></p>
        <a class="model_btn" href="/score-verify">修改</a>
        <img class="img_btn" src="../../../assets/img/modules/score/qy_10.png" alt="" @click="showModel = false">
      </div>
    </div>
    <drag-loding v-if="showLoding"></drag-loding>
  </div>
</template>
<script>
import dragLoding from '@/components/loding'
export default {
  name: 'score_legend',
  components: {
    dragLoding
  },
  data () {
    return {
      /*
        0.未核验：未注册职工网/提交核验申请；
        1.核验中：已注册职工网/提交核验申请，但工会管理员没完成审核；
        2.已确认：通过核验审核（用户端点亮工会会员勋章）
        3.核验不通过：核验审核不通过
       *****************************************/
      status: 0,
      showModel: false,
      showLoding: true, // 是否显示加载条
      phone: 0,
      userData: null // 用户数据
    }
  },
  props: {},
  watch: {},
  methods: {
    /*
     *@author wf_Huang
     *@Time 2019/8/8 0008 15:26
     *@function  审核中弹窗
     *****************************************/
    modifyMadel () { // 修改
      this.$dialog.confirm({
        title: '修改核验信息',
        message: '您是否确认修改工会会员核验信息，修改后将重新提交职工教育网审核'
      }).then(() => {
        // on confirm
        this.$router.push({ path: '/score-verify' })
      }).catch(() => {
        // on cancel
      })
    },
    urgentMadel () {
      this.$dialog.alert({
        title: '催办申请已提交',
        message: '请您耐心等候',
        confirmButtonText: '我知道了'
      }).then(() => {
        // on close
      })
    },
    /* wf_Huang 2019/8/21 0021 获取会员信息 */
    getMemberData () {
      this.$http({
        url: `${window.SITE_CONFIG['unionURL']}/api/member/getApply?phone=${this.$store.state.score.memberData.phone}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          this.status = 0
          this.$store.state.score.memberData = {
            id: '', // 申请记录ID
            ucid: '', // 职工网用户中心ID
            platform: '', // 平台标识
            qxym_id: '', // 对应平台用户ID
            name: '', // 姓名
            phone: this.$route.query.phone, // 手机号
            id_card: '', // 身份证
            image: '', // 会员证照片地址url
            proof_image: '', // 工会会员凭证照片地址url
            company_id: '', // 企业ID
            company_name: '', // 企业名称
            union_id: '', // 企业所属工会ID
            union_name: '', // 工会名称
            region_id: '', // 地区ID
            region_pids: '', // 地区IDS
            region_pnames: '', // 地区名称冗余字段
            Status: '' // 审核状态
          }
          localStorage.setItem('stateData', JSON.stringify(this.$store.state))
          return false
        }
        this.userData = res.data
        /* wf_Huang 2019/8/21 0021 这里产品规定的状态值跟
          接口返回的状态值 不一致转一下 都是大爷 妈的 */
        if (res.data.status === 0) {
          this.status = 1
        }
        if (res.data.status === 1) {
          this.status = 2
        }
        if (res.data.status === 2) {
          this.status = 3
        }
        // 弹出提示
        this.showModel = true
        // 全局注册参数
        if (res.data) {
          this.$store.state.score.memberData = res.data
          localStorage.setItem('stateData', JSON.stringify(this.$store.state))
        }
      }).catch(() => {})
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    if (this.$route.query.phone) {
      this.$store.state.score.memberData.phone = this.$route.query.phone
      localStorage.setItem('stateData', JSON.stringify(this.$store.state))
    }
    Promise.all([
      this.getMemberData()
    ]).then(() => {
      this.showLoding = false
    })
  },
  destroyed () {
  }
}
</script>
<style lang="scss" scoped>
  .score_legend {
    .model_status_1{
      background-color: rgba(0,0,0,0.6);
      position: fixed;
      z-index: 99;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
      .model_tab_body{
        width: 580px;
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 4px;
        background: #ffffff url("../../../assets/img/modules/score/qy_19.png") no-repeat top;
        background-size: 100% auto;
        transform: translate(-50%, -50%);
        padding: 0 40px 50px;
        .h4_text{
          font-size: 34px;
          color: #222222;
          letter-spacing: 0;
          text-align: center;
          padding: 70px 0;
          margin: 0;
        }
        .p_z{
          font-size: 28px;
          color: #666666;
          line-height: 30px;
          padding-top: 40px;
          margin: 0;
        }
        .p_span{
          font-size: 24px;
          color: #FBA146;
          line-height: 30px;
          margin-bottom: 80px;
        }
        .model_btn{
          background: #027FFE;
          border-radius: 4px;
          width: 500px;
          height: 86px;
          line-height: 86px;
          font-size: 32px;
          color: #FFFFFF;
          display: block;
          margin:  0 auto;
          text-align: center;
        }
        .img_btn{
          width: 64px;
          height: 64px;
          position: absolute;
          bottom: -120px;
          left: calc(50% - 32px);
        }
      }
    }
    .model_status_3{
      background-color: rgba(0,0,0,0.6);
      position: fixed;
      z-index: 99;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
      .model_tab_body{
        width: 580px;
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 4px;
        background: #ffffff url("../../../assets/img/modules/score/qy_13.png") no-repeat top;
        background-size: 100% auto;
        transform: translate(-50%, -50%);
        padding: 0 40px 50px;
        .h4_text{
          font-size: 34px;
          color: #222222;
          letter-spacing: 0;
          text-align: center;
          padding: 70px 0;
          margin: 0;
        }
        .p_z{
          font-size: 28px;
          color: #666666;
          line-height: 30px;
          padding-top: 40px;
          margin: 0;
          text-align: center;
        }
        .p_span{
          font-size: 24px;
          color: #FBA146;
          line-height: 30px;
          margin-bottom: 80px;
          text-align: center;
        }
        .model_btn{
          background: #027FFE;
          border-radius: 4px;
          width: 500px;
          height: 86px;
          line-height: 86px;
          font-size: 32px;
          color: #FFFFFF;
          display: block;
          margin:  0 auto;
          text-align: center;
        }
        .img_btn{
          width: 64px;
          height: 64px;
          position: absolute;
          bottom: -120px;
          left: calc(50% - 32px);
        }
      }
    }
    .banner_img{
      height: 260px;
      img{
        width: 750px;
        height: auto;
      }
    }
    .status_body{
      margin: 50px 32px;
      background: #F8F8F8;
      border-radius: 4px;
      position: relative;
      padding: 30px;
      img{
        width: 117px;
        height: 36px;
        position: absolute;
        top: -10px;
        right: 36px;
      }
      .error_img{
        width: 137px;
      }
      .firm_name{
        font-family: PingFangSC-Medium;
        font-size: 30px;
        color: #000000;
      }
      .title_text{
        font-size: 24px;
        color: #666666;
      }
      .error{
        color: #E73032;
      }
      .user_body{
        border-top: 1px dashed #C8C8C8;
        padding-top: 20px;
        .item_text{
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #eceff5;;
          line-height: 80px;
          &:last-child{
            border: 0;
          }
          span{
            font-size: 24px;
            color: #666666;
            letter-spacing: 0;
          }
        }
      }
    }
    .tab_a{
      padding: 40px 40px 160px;
      .verify_text{
        font-size: 26px;
        color: #666666;
        line-height: 37px;
        margin-bottom: 80px;
      }
      .title_text{
        height: 3px;
        width: 100%;
        margin: 40px auto;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        background: linear-gradient(to left,#ffffff, #EAEAEA, #ffffff);
        span{
          background-color: #ffffff;
          display: inline-block;
          font-size: 30px;
          color: #666666;
          padding: 0 30px;
          line-height: 42px;
        }
      }
      .icon_list{
        display: flex;
        flex-wrap: wrap;
        justify-items: center;
        padding: 0;
        .icon_item{
          width: 33.333%;
          text-align: center;
          margin-bottom: 50px;
          position: relative;
          img{
            width: 100px;
            height: 100px;
            display: block;
            margin: 0 auto 15px;
          }
          .tag_img{
            width: 80px;
            height: 24px;
            position: absolute;
            top: 5px;
            right: 30px;
          }
          p{
            font-family: PingFangSC-Regular;
            font-size: 24px;
            color: #999999;
            letter-spacing: 0;
            text-align: center;
            line-height: 24px;
            margin: 0;
          }
        }
      }
    }
    .tab_b{
      padding: 60px 0;
      img{
        width: 750px;
        height: auto;
      }
    }
    .tab_c{
      padding: 50px 50px 100px;
      .item_list{
        margin-bottom: 60px;
      }
      .item_text{
        display: flex;
        margin-bottom: 20px;
        .left_img{
          width: 67px;
          height: 57px;
          margin-right: 15px;
        }
        .right_text{
          width: 100%;
          p{
            font-size: 28px;
            color: #222222;
            line-height: 40px;
            margin: 5px 0;
            font-family: PingFangSC-Regular;
          }
          span{
            font-size: 24px;
            color: #FBA146;
            display: block;
          }
          .zs_img{
            width: 460px;
            height: auto;
            margin: 20px auto;
          }
        }

      }
    }
    .footer_btn{
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 110px;
      background-color: #ffffff;
      box-shadow: 0 0 20px rgba(0,0,0,0.1);
      padding: 12px 45px;
      .wk_bg{
        background: #FA3A51;
        border-radius: 4px;
        height: 86px;
        width: 100%;
        display: flex;
        justify-items: center;
        justify-content: center;
        align-content: center;
        align-items: center;
        a{
          font-size: 32px;
          color: #FFFFFF;
          letter-spacing: 0;
          width: 100%;
          line-height: 40px;
          text-align: center;
          &:nth-child(2){
            border-left: 1px solid #ffffff;
          }
        }
      }
    }
  }
</style>
